<style lang="scss">
/*.el-tree-node{
    height: 60px!important;
    background: white;
    .el-tree-node__content{
        background: white;
        height: 60px!important;
    }
}*/

.el-tree{
    .el-tree-node__content{
        height: 60px;
        display: block!important;
    }
    .el-tree-node__children{

        overflow: visible!important;
    }
}
</style>
<template>
    <div class="blog">
        <banner :image="image"></banner>
        <el-row>
            <el-col :span="4" :offset="1">
                <el-affix :offset="200">
                    <div
                        style="margin-right: 20px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0.5, 0.1);background: white;border-radius: 20px">
                        <el-progress :text-inside="true" :stroke-width="24" :percentage="$store.state.scrollNum"
                                     status="success"></el-progress>
                    </div>
                    <div
                        v-for="(anchor,index) in titles"
                        :key="index"
                        style="text-align: left;margin-left: 30px"
                        :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
                        @click="handleAnchorClick(anchor)"
                    >
                        <li style="cursor: pointer">{{ anchor.title }}</li>
                    </div>
                    <div>
                        <i @click="showMenu" style="font-size: 40px!important;cursor: pointer"
                           class="el-icon-arrow-down"></i>
                    </div>
                </el-affix>
            </el-col>
            <el-col :span="14" style="text-align: left;box-shadow: 0 2px 12px 0 rgba(0, 0, 0.5, 0.1);">
                <!--                <v-md-preview :text="blog.content" ref="preview"/>-->
                <v-md-editor ref="preview" mode="preview" v-model="blog.content"></v-md-editor>
                <!-- 文章底部 -->

                <!--声明-->
                <div class="open-message">
                    <p>声明：这是个人自愿分享发布到<a href="http://codeblog.space"
                                        target="_blank">CodeBlog网站</a>网站</p>
                    <p>转载：转载请注明原文链接 - <a href="/">{{ blog.title }}</a></p>
                </div>
                <div style="background: #116157;width: 100%;height: 60px;">
                    <div class="donate left-pad" @click="saveFavour">
                        <el-tooltip  effect="light" :content="'点赞 '+blog.favourCount" placement="top-start">
                            <span>赞</span>
                        </el-tooltip>
                    </div>
                    <div class="donate left-pad" @click="makeComment">
                        <el-tooltip  effect="light" :content="'评论 '+blog.commentCount" placement="top-start">
                            <span>评</span>
                        </el-tooltip>
                    </div>
                    <div class="donate left-pad" >
                        <el-tooltip  effect="light" :content="'收藏 '+blog.collectCount" placement="top-start">
                            <span>藏</span>
                        </el-tooltip>
                    </div>
                    <div class="donate left-pad" >
                        <el-tooltip  effect="light" :content="'阅览次数 '+blog.viewCount" placement="top-start">
                            <span><i class="fa fa-eye"></i></span>
                        </el-tooltip>
                    </div>

                </div>
                <div v-if="commentInput" style="background: #2c3e50;width: 100%;height: 60px;">
                    <el-input v-model="commentContent" style="width: 70%;position: relative;top: 50%;transform: translateY(-50%);margin-left: 50px"></el-input>
                    <el-button @click="saveComment" style="position: relative;top: 50%;transform: translateY(-50%);margin-left: 50px">{{ commentButton }}</el-button>
                </div>
                <div style="background:white;width: 100%;min-height: 30px;margin-bottom: 30px;">
                    <div style="margin-left: 10px">
                        <h1 style="width: 100%;">评论</h1>
                        <div v-if="localComment">
                            <el-tree
                                :load="getBlogCommentLazy"
                                lazy
                                accordion
                                indent="50"
                                node-key="id"
                                ref="commentTree"
                                :props="defaultProps">
                                <template  v-slot="{ node, data }">

                                    <el-avatar style="position: relative;top: 50%;transform: translateY(-50%)" :src="data.avatar"></el-avatar>

                                    <el-tag  type="success">{{data.commenter}}</el-tag>
                                    <span>
                                      <span style="margin-left: 10px;margin-right: 3px"><b>:</b>{{node.label}}</span>
                                        <span style="margin-left: 20px;margin-right: 3px"><b>时间:</b>{{data.createTime.substring(0,10)}}</span>
                                      <el-button
                                          style="margin-left: 20px"
                                          type="text"
                                          size="mini"
                                          @click="() => makeReply(node)">
                                        回复
                                      </el-button>
                                </span>
                                </template>
                            </el-tree>
                        </div>
                    </div>


                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Banner from "@/components/body/Banner";
import {getBlog, getBlogCommentLazy, saveComment, saveFavour} from "@/api";
import {ElMessage} from "element-plus";

export default {
    name: "Articles",
    data() {
        return {
            localComment:false,
            commentInput:false,
            commentButton:'评论',
            commentContent:'',
            parenCommentId:0,
            titles: [],
            blog: {},
            image: '/static/website/background.jpg',
            avatar: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            defaultProps: {
                children: 'reply',
                label: 'content'
            }
        }
    },
    components: {
        Banner,
    },
    methods: {
        getContent() {
            var that = this;
            const id = that.$route.params.id
            getBlog(id).then(res => {
                that.blog = res.data
                //这个很重要，在加载完博客数据后 加载评论
                that.localComment=true
            }).catch(err => {
                console.log(err)
            });
        },
        handleAnchorClick(anchor) {
            const {preview} = this.$refs;
            const {lineIndex} = anchor;

            const heading = preview.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);

            if (heading) {
                preview.scrollToTarget({
                    target: heading,
                    scrollContainer: window,
                    top: 60,
                });
            }
        },
        getBlogCommentLazy(node, resolve){
            var that=this;
            if (node.level === 0) {
                getBlogCommentLazy(that.blog.id,0)
                    .then(res=>{
                        resolve(res.data)
                    })
            }
            if (node.level > 0) {
                getBlogCommentLazy(that.blog.id,node.data.id)
                    .then(res=>{
                        resolve(res.data)
                    })
            }
        },
        showMenu() {
            const anchors = this.$refs.preview.$el.querySelectorAll('h1,h2,h3,h4,h5,h6');
            const titles = Array.from(anchors).filter((title) => !!title.innerText.trim());
            if (!titles.length) {
                this.titles = [];
                return;
            }
            const hTags = Array.from(new Set(titles.map((title) => title.tagName))).sort();
            this.titles = titles.map((el) => ({
                title: el.innerText,
                lineIndex: el.getAttribute('data-v-md-line'),
                indent: hTags.indexOf(el.tagName),
            }));
        },
        makeComment(){
            //主动评论
            if(this.$store.state.user==null){
                ElMessage.error('请登录');
                return
            }
            this.commentInput=!this.commentInput
            this.parenCommentId=0;
            this.commentButton='评论'
        },
        makeReply(node){
            node.isLeaf=false
            node.loaded=false
            //回复消息
            if(this.$store.state.user==null){
                ElMessage.error('请登录');
                return
            }
            this.commentInput=true
            this.parenCommentId=node.data.id;
            this.commentButton='回复'
        },
        saveComment(){
            var that=this;
            if(this.$store.state.user==null){
                ElMessage.error('请登录');
                return
            }
            if(this.commentContent==null||this.commentContent.trim().length===0){
                ElMessage.error('输入评论内容');
                return
            }
            saveComment(this.blog.id,this.parenCommentId,this.commentContent)
            .then(res=>{
                if (res.code===200){
                    ElMessage.success({
                        message: '评论成功',
                        type: 'success'
                    });
                    that.blog.commentCount++;
                }
                else ElMessage.error('评论失败');
            })
            .catch(err=>{
                console.log(err)
                ElMessage.error('评论失败');
            })
        },
        saveFavour(){
            var that=this;
            if(this.$store.state.user==null){
                ElMessage.error('请登录');
                return
            }
            saveFavour(this.blog.id)
                .then(res=>{
                    if (res.code===200){
                        that.blog.favourCount++;
                    }
                })
                .catch(err=>{
                    console.log(err)
                    ElMessage.error('点赞失败');
                })
        }

    },
    created() {
        this.getContent();

    },
    mounted() {

    }
}
</script>

<style lang="scss" scoped>
.blog {
    min-height: 10rem;
}

.card-title {
    font-weight: bold;
    font-size: 18px;
    font-family: 微软雅黑, serif;
}

.tag {
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 10px;
}

.open-message {
    margin: 10px 0;
    position: relative;
    background: #2B2B2B;
    padding: 10px 30px;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;

    &:after {
        content: "";
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #2B2B2B;
        position: absolute;
        top: -8px;
        left: 48%;
    }

    p {
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    a {
        color: #A0DAD0;
        padding: 0 5px;
    }
}

.donate {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    float: left;
    line-height: 36px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border: 1px solid #ffffff;

    &:hover {
        border: 1px solid goldenrod;

        span {
            color: goldenrod;
        }
    }

    span {
        color: #ffffff;
        padding: 10px;
        position: relative;
        cursor: pointer;
    }

    .donate_inner {
        display: none;
        margin: 0;
        list-style: none;
        position: absolute;
        left: 80px;
        top: -40px;
        background: white;
        padding: 10px;
        border: 1px solid #ffffff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0.5, 0.1);
        border-radius: 3px;

        &.show {
            display: block;
        }

        li {
            float: left;
        }

        img {
            width: 100px;
        }

        p {
            text-align: center;
            font-size: 15px;
            color: #D2D2D2;
            line-height: 1rem;
        }
    }

    .donate_inner:after, .donate_inner:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 45%;
        margin-left: -8px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #fff;
    }

    .donate_inner:before {
        left: -1px;
        border-right: 8px solid #ddd;
    }
}

.left-pad {
    margin: 0 60px 0 60px;
}
</style>
